/**
 * 入口文件
 */

// 1.导入jquery文件
// import ** from ** 是ES6中导入模块的方式
// 由于ES6的代码比较高级，浏览器解析不了，import 这一行执行可能会报错
import $ from 'jquery'
// 相当于const $ = require('jquery');

// 使用import导入css样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 注意：如果要通过路径的形式，去引入node_modules中相关的文件，可以直接省略路径前面的node_modules这一层目录，直接写包的名称，然后后面跟上具体的文件路径。
// 不写node_modules这一层目录，默认回去node_modules中查找
import 'bootstrap/dist/css/bootstrap.css'
// 注意： webpack默认只能打包处理JS类型的文件，无法处理其他非js类型的文件。
// 如果要处理非js类型的文件，我们需要手动安装一些适合第三方loader加载器。
// 1.如果想要打包处理css文件，需要安装 npm i style-loader css-loader -D
// 2.打开webpack。config.js配置文件，在里面新增一个配置节点，叫做module，它是一个对象，在这个module对象身上，有个
//   rules属性，是一个数组，这个数组中存放了所有第三方文件的匹配和处理规则。

// 注意：webpack处理第三方文件类型的过程：
// 1.发现这个要处理文件的不是js文件，然后就去配置文件中，查找有没有对应的第三方loader规则
// 2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型。
// 3.在调用loader的时候，是从后面往前调用的；
// 4.当最后一个loader调用完毕，会把处理的结果直接交给webpack进行打包合并，最终输出到bundle.js中去。




$(function () {
    $('li:odd').css('backgroundColor', 'pink');
    $('li:even').css('backgroundColor', 'skyblue');
});

// webpack（版本不要太高，最好不要用4以上的）的作用
// 1.webpack能够处理js文件的互相依赖关系
// 2.webpack能够处理js的兼容问题，能够把高级的，浏览器不能识别的语法转为低级的，浏览器能够正常识别的语法

// 打包文件的命令： webpack  要打包的文件的路径  打包好的输出文件的路径


// 使用webpack-dev-server（版本不要太高 @2.9.0） 这个工具，来实现自动打包编译的功能。
// 1.运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
// 2.安装完毕后，这个工具的用法，和webpack命令的用法完全一样。
// 3.由于，我们是在项目中安装的，所以无法把它(webpack-dev-server)当作脚本命令，
//   在powershell终端中直接运行（只有安装到全局 -g 的工具，才能在终端中正常执行）。
// 4.webpack-dev-server这个工具，如果想要正常运行，要求在本地项目中必须安装webpack。
// 5.webpack-dev-server 帮我们打包生成的bundle.js  文件，并没有存放到实际的物理磁盘上；而是直接托管到了电脑的内存中，所以项目根目录找不到。
// 6.我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了项目的根目录中，命名为bundle.js。



// class关键字
class Person {
    // 使用static关键字，可以定义静态属性，后面就可以直接通过类型，直接访问属性
    // 实例属性：只能通过类的实例，来访问属性。
    static info = {name: 'aa', age: '23'}
}

console.log(Person.info);
// 在webpack中，默认只能处理一部分es6的新语法，一些更高级的ES6活着ES7语法，webpack是处理不了的；这时候就需要借助第三方的loader来帮助
// webpack处理这些高级的语法，当第三方loader把高级语法转换为低级的语法之后， 会把结构交给webpack去打包到bundle.js中。

// 通过babel可以将高级语法转换为低级的语法。
// 1在webpack中，可以运行如下两套命令，安装两套包，实现babel相关的loader功能：
// 1.1第一套： npm i babel-core babel-loader babel-plugin-transform-runtime -D  ;
// 1.2第二套： npm i babel-preset-env babel-preset-stage-0 -D  ;
// 2.在webpack的配置文件中，在module节点下的rules数组中，添加一个新的匹配规则：
// 2.在webpack的配置文件中，在module节点下的rules数组中，添加一个新的匹配规则：
// 2.1 {test:/\.js$/, use:'babel-loader', exclude:/node_modules/}
// 2.2 注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉：原因如下：
// 2.2.1 如果不排除node_modules,则babel会把node_modules中所有的第三方js文件都打包编译，这样会非常消耗cpu，同时打包速度非常慢；
// 2.2.2 即时最终babel把所有node_modules中的js转换完毕了，但是项目也无法正常运行！
// 3.在项目的根目录中，新建一个叫做 .babelrc 的babel配置文件，这个配置文件，术语JSON格式，所以，在写 .babelrc配置的时候，
// 必须符合JSON语法规范：不能写注释，字符串必须用双引号。
// 3.1在 .babelrc写如下的配置： presets:【语法】
// {
//     "presets": ["env", "stage-0"],
//     "plugins": ["transform-runtime"]
// }
// 4.了解：目前我们安装的babel-preset-env是比较新的ES语法包含了所有和es**相关的语法，之前，我们安装的是babel-preset-es2015,现在出了一个更新的语法插件，叫做
